<template>
  <div id="wisdomPark-section-v6">
    <MyHeadline title="态势分析" :islink="false" />
    <MyCell>
      <div class="content-v1">
        <div class="left">
          <div class="title">公测</div>
          <div class="">数量：2</div>
        </div>
        <div class="right"></div>
      </div>
      <div class="content-v2">
        <div class="left">
          <div class="title">男女蹲位比</div>
          <div class="item">
            <div class="left">
              <div class="icon"></div>
              <div class="value">58%</div>
            </div>
            <div class="right">
              <div class="icon"></div>
              <div class="value">42%</div>
            </div>
          </div>
          <div class="title">男女人流量</div>
          <div class="item">
            <div class="left">
              <div class="icon"></div>
              <div class="value">15/h</div>
            </div>
            <div class="right">
              <div class="icon"></div>
              <div class="value">5/h</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">空气质量</div>
          <div class="item" v-for="i in wisdomPark_data_v2" :key="i">
            <div class="left">
              <div class="text">{{ i.title }}</div>
            </div>
            <div class="right">
              <div class="schedule">
                <div class="value" :style="`width:${Number(((i.value / 100) * 100).toFixed())}%`"></div>
              </div>
              <div class="value">{{ Number(((i.value / 100) * 100).toFixed()) }}{{ i.unit }}</div>
            </div>
          </div>
        </div>
      </div>
    </MyCell>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { deepCopy } from '@/utils/utils'
import HtEcharts from '@/base-ui/echarts/index'
import MyCell from '@/components/my-cell/index.vue'
import MyHeadline from '@/components/my-headline/index.vue'

import echartsConfig from '../config/wisdomPark-section-v6/echarts-config'
// ========================= 实例

// ========================= 钩子
onMounted(() => {
  echarts_init()
})

// ========================= 数据
// echarts 配置
const echarts_options = ref(deepCopy(echartsConfig))
// 数据
const wisdomPark_data_v1 = ref<any>([
  {
    title: '应检查风险点',
    value: 25407,
    unit: '处'
  },
  {
    title: '实际检查风险点',
    value: 23224,
    unit: '处'
  },
  {
    title: '风险检查覆盖率',
    value: 91.4,
    unit: '%'
  },
  {
    title: '同比',
    value: 5.6,
    unit: '%'
  }
])
// 数据
const wisdomPark_data_v2 = ref<any>([
  {
    title: '氨气',
    value: 23,
    unit: '%'
  },
  {
    title: '硫化氢',
    value: 35,
    unit: '%'
  },
  {
    title: 'PM2.5',
    value: 76,
    unit: '%'
  }
])

// ========================= 函数
// 初始化
const echarts_init = () => {
  onEcharts_data(12)
}
// 随机数
const getRandomInt = (min: number, max: number): number => {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min
}

// echartsv6数据
const onEcharts_data = (num: number) => {
  const xAxisData: any = []
  const seriesData: any = [
    {
      type: 'bar',
      stack: 'x',
      data: []
    }
  ]
  for (let i = 0; i < num; i++) {
    xAxisData.push(`${i + 1}月`)
    seriesData[0].data.push(getRandomInt(50, 200))
  }
  echarts_options.value.xAxis.data = xAxisData
  echarts_options.value.series = seriesData
}

// ========================= 请求

defineExpose({
  echarts_init
})
</script>

<style scoped lang="less">
@left-width: 30%;
#wisdomPark-section-v6 {
  .width_height(100%,100%);
  .content-v1 {
    // .width_height(100%,263px);
    .D_J_A(space-between, center);
    width: 100%;
    box-sizing: border-box;
    padding: 0 @space_20 @space_20 @space_20;
    .left {
      .image(100px,100px,url('@/assets/imgs/wisdomPark/gif.png'));
      .D_F_J_A(column, center,center);
      .font-S-W-C(14px,400,#fff);
      .title {
        margin-bottom: 10px;
      }
    }
    .right {
      .image(300px,172px,url('@/assets/imgs/wisdomPark/map.png'));
    }
  }
  .content-v2 {
    .D_J(space-between);
    padding: 0 @space_20;
    .font-S-W-C(14px,400,#fff);
    .left,
    .right {
      .title {
      }
      .item {
        .D_J(space-between);
        .left,
        .right {
          .D_A( center);
          width: calc(100% / 2 - @space_20 / 2);
        }
      }
    }
    .left {
      width: calc(100% / 2 - @space_20 / 2);
      .title {
        margin-bottom: 10px;
      }
      .item {
        .D_J(space-between);
        margin-bottom: 10px;
        .left,
        .right {
          .D_A( center);
          width: calc(100% / 2 - @space_20 / 2);
          .icon {
          }
        }
        .left {
          .icon {
            .image(42px,42px,url('@/assets/imgs/wisdomPark/man.png'));
          }
        }
        .right {
          .icon {
            .image(42px,42px,url('@/assets/imgs/wisdomPark/girl.png'));
          }
        }
      }
    }
    .right {
      width: calc(100% / 2 - @space_20 / 2);
      .item {
        .D_J_A(space-between,center);
        .width_height(100%,45px);
        .left {
          .D_A(center);
          width: @left-width;
        }
        @rightvalue--width: 35%;
        .right {
          width: calc(100% - @left-width);
          .schedule {
            .width_height(calc(100% - @rightvalue--width),20px);
            background-color: #3c5686;
            .value {
              transition: 0.5s;
              height: 100%;
              background-image: linear-gradient(to right, #3465f5, #04b0ff);
            }
          }
          .value {
            width: @rightvalue--width;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
